<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name="Author" content="benben" />
	<meta name="Description" content="Produces by JWI (http://www.51jsr.com)" />
	<meta name="keywords" content="JavaScript Framework,webUI,js,function,HTML,CSS,脚本" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Function 的封装演示 jsRookie - JavaScript UI module package</title>
	<link rel="shortcut icon" href="/favicon.ico" />
	<link href="../resources/example.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="../jsr/jsr.core.js?skin=default&lang=zh-cn"></script>
</head>

<body>
<div id="bodyWrap" class="font">
	<b class="demoCaption">Function 的封装演示</b><hr/><br/>
	1. 函数委托测试
<pre>
var m, n;
m = {a:1, b:2, c:3},
n = {a:"A",b:"B",c:"C"};

function fn0(x, y) {
	var rs = [], t = this;
	x == 1 && rs.push(t.a),
	y == 2 && rs.push(t.b),
	rs.push(t.c),
	alert(rs.join("---"));
};
fn0.a = "a1", fn0.b = "b1", fn0.c = "c1";
</pre>
	<table class="runWrap">
		<tr><td width="300px">
			a) 执行 <b class="blue">fn0.$delegate()();</b>
		</td><td width="300px">
			结果：<b class="red">c1</b>
		</td><td width="160px">
			<input type="button" value="查看结果" onclick="fn0.$delegate()()"/>
		</td></tr>
		<tr><td>
			b) 执行 <b class="blue">fn0.$delegate(m, 1)();</b>
		</td><td>
			结果：<b class="red">1---3</b>
		</td><td>
			<input type="button" value="查看结果" onclick="fn0.$delegate(m, 1)()"/>
		</td></tr>
		<tr><td>
			c) 执行 <b class="blue">fn0.$delegate(m, 1, 2)();</b>
		</td><td>
			结果：<b class="red">1---2---3</b>
		</td><td>
			<input type="button" value="查看结果" onclick="fn0.$delegate(m, 1, 2)()"/>
		</td></tr>
		<tr><td>
			d) 执行 <b class="blue">fn0.$delegate(n)();</b>
		</td><td>
			结果：<b class="red">C</b>
		</td><td>
			<input type="button" value="查看结果" onclick="fn0.$delegate(n)()"/>
		</td></tr>
		<tr><td>
			e) 执行 <b class="blue">fn0.$delegate(n, 1, 2)();</b>
		</td><td>
			结果：<b class="red">A---B---C</b>
		</td><td>
			<input type="button" value="查看结果" onclick="fn0.$delegate(n, 1, 2)()"/>
		</td></tr>
	</table>
	<br/><br/><br/><br/>
	2. setInterval与setTimeout的封装扩展
<pre>
var m, n, count;
m = {a:1, b:2, c:3},
n = {a:"A",b:"B",c:"C"};

function fn1(x, y) {
	var rs = [], t = this;
	x == 1 && rs.push(t.a),
	y == 2 && rs.push(t.b),
	rs.push(t.c),
	alert(rs.join("---"));
	
	++count == 3 && fn1.$clearTimer();
};
fn1.a = "AAA", fn1.b = "BBB", fn1.c = "CCC";
</pre>
	<table class="runWrap">
		<tr><td width="300px">
			a) 执行 <b class="blue">fn1.$defer(3000);</b>
		</td><td width="380px">
			结果：<b class="red">CCC，三秒钟后显示</b> (相当于setTimeout)
		</td><td width="160px">
			<input type="button" value="查看结果" onclick="count = 0;tID0 = fn1.$defer(3000);"/>
			<input type="button" value="取消查看" onclick="clearTimeout(tID0);"/>
		</td></tr>
		<tr><td>
			b) 执行 <b class="blue">fn1.$defer(3000, m);</b>
		</td><td>
			结果：<b class="red">3，三秒钟后显示</b> (相当于setTimeout)
		</td><td>
			<input type="button" value="查看结果" onclick="count = 0;tID1 = fn1.$defer(3000, m);"/>
			<input type="button" value="取消查看" onclick="clearTimeout(tID1);"/>
		</td></tr>
		<tr><td>
			c) 执行 <b class="blue">fn1.$defer(3000, m, false, 1);</b>
		</td><td>
			结果：<b class="red">1---3，三秒钟后显示</b> (相当于setTimeout)
		</td><td>
			<input type="button" value="查看结果" onclick="count = 0;tID2 = fn1.$defer(3000, m, false, 1);"/>
			<input type="button" value="取消查看" onclick="clearTimeout(tID2);"/>
		</td></tr>
		<tr><td>
			d) 执行 <b class="blue">fn1.$defer(3000, n, true, 1);</b>
		</td><td>
			结果：<b class="red">A---C，连续显示3次，每次间隔三秒</b> (相当于setInterval)
		</td><td>
			<input type="button" value="查看结果" onclick="count = 0;!tID3 && (tID3 = fn1.$defer(3000, n, true, 1));"/>
			<input type="button" value="取消查看" onclick="clearInterval(tID3);tID3 = 0;"/>
		</td></tr>
	</table>
	<br/>注：setInterval与setTimeout的封装扩展的执行例子不要同时执行！
	<br/><br/><br/><br/>
	3. 拦截器函数测试
<pre>
function fn2(arg) {
	alert("我是拦截器函数测试!!\n传入的参数值：" + arg);
};

fn2 = fn2.$interceptor(function(arg) {
	alert("已被拦截，正在验证参数的合法性...")
	if(typeof arg != "string") {
		alert("您传入的参数必须为字符串，验证失败");
		return false;
	}//Endif
});
</pre>
	<table class="runWrap">
		<tr><td width="300px">
			a) 执行 <b class="blue">fn2(new Date);</b>
		</td><td width="380px">
			结果：<b class="red">显示当前的时间</b>
		</td><td width="160px">
			<input type="button" value="查看结果" onclick="fn2(new Date);"/>
		</td></tr>
		<tr><td>
			b) 使用拦截器后再执行 <b class="blue">fn2(new Date);</b>
		</td><td>
			结果：<b class="red">参数不合法，验证失败</b>
		</td><td>
			<input type="button" value="查看结果" onclick="interceptor(new Date);"/>
		</td></tr>
		<tr><td>
			c) 使用拦截器后再执行 <b class="blue">fn2("jsRookie");</b>
		</td><td>
			结果：<b class="red">传入的参数值：jsRookie</b>
		</td><td>
			<input type="button" value="查看结果" onclick="interceptor('jsRookie');"/>
		</td></tr>
		<tr><td>
			d) 使用拦截器后再执行 <b class="blue">fn2(3);</b>
		</td><td>
			结果：<b class="red">参数不合法，验证失败</b>
		</td><td>
			<input type="button" value="查看结果" onclick="interceptor(3);"/>
		</td></tr>
	</table>
	<br/><br/>
	<!--input type="button" value="清理内存" onclick="setTimeout(CollectGarbage, 10);"/-->
	<br/><br/>
	&copy 2008-2011 51jsr.com
</div>
</body>
<script language="JavaScript">
var m, n, count;
m = {a:1, b:2, c:3},
n = {a:"A", b:"B", c:"C"};

//函数委托测试
function fn0(x, y) {
	var rs = [], t = this;
	x == 1 && rs.push(t.a),
	y == 2 && rs.push(t.b),
	rs.push(t.c),
	alert(rs.join("---"));
};
fn0.a = "a1", fn0.b = "b1", fn0.c = "c1";

//setInterval与setTimeout的封装扩展
function fn1(x, y) {
	var rs = [], t = this;
	x == 1 && rs.push(t.a),
	y == 2 && rs.push(t.b),
	rs.push(t.c),
	alert(rs.join("---"));
	
	++count == 3 && fn1.$clearTimer();
};
var tID0, tID1, tID2, tID3;
fn1.a = "AAA", fn1.b = "BBB", fn1.c = "CCC";

//拦截器函数测试
function fn2(arg) {
	alert("我是拦截器函数测试!!\n传入的参数值：" + arg);
};
//为了测试用例的重复，这里把拦截器定义给了新变量
//fn2 = fn2.$interceptor(...);
var interceptor = fn2.$interceptor(function(arg) {
	alert("已被拦截，正在验证参数的合法性...")
	if(typeof arg != "string") {
		alert("您传入的参数必须为字符串，验证失败");
		return false;
	}//Endif
});
</script>
</html> 